<template>
  <div
    class="main"
    :id="'main-' + randomNumber"
    v-if="flag"
    :style="{ height: height + 'px' }"
  ></div>
</template>

<script>
export default {
  props: {
    xData: {
      type: Array,
      default: () => [],
    },
    yData: {
      type: Array,
      default: () => [],
    },
    height: {
      type: Number,
      default: 400,
    },
    dimension: {
      type: String,
      default: "",
    },
  },
  watch: {
    yData: {
      handler(val) {
        const maxNum = Math.max.apply(null, this.yData);
        this.gridLeft =
          maxNum >= 100000
            ? 66
            : maxNum >= 10000
            ? 56
            : maxNum >= 1000
            ? 46
            : 36;
        const option = {
          tooltip: {
            trigger: "axis",
            formatter: (params) => {
              return (
                "<div style='background: rgba(119,217,107,0.05);border-radius: 4px;border: 1px solid #E1F9EB;margin: -13px;padding: 10px;backdrop-filter: blur(10px);'>" +
                '<span style="display: inline-block;background: #1CD173;margin-right: 7px; width: 8px;height: 8px;border-radius: 50%;"' +
                params[0].marker +
                "</span>" +
                this.crossName +
                "<br>" +
                "<span style='font-size: 14px; color: #333;'>" +
                params[0].name +
                "</span>" +
                "<br>" +
                '<span  style="color: #222222;font-size: 18px;font-family: D-DIN-PRO-800-ExtraBold;padding: 4px 0">' +
                params[0].value +
                "</span>" +
                "</div>"
              );
            },
          },
          grid: {
            left: this.gridLeft,
            top: 48, // 设置条形图的边距
            right: 78,
            bottom: 45,
          },
          xAxis: {
            name: "及时率",
            nameTextStyle: {
              color: "#8193B2",
              fontSize: "14",
            },
            type: "category",
            boundaryGap: true,
            data: this.xData,
            axisTick: {
              show: false,
            },
            axisLabel: {
              inside: false,
              margin: 18,
              textStyle: {
                color: "#8193B2", // x轴颜色
                fontWeight: "400",
                fontSize: "12",
                fontFamily: "PingFangSC",
              },
            },
            axisLine: {
              //坐标轴轴线相关设置
              lineStyle: {
                color: "#EAEDF7",
              },
            },
          },
          yAxis: {
            name: "（数量 人）",
            nameTextStyle: {
              color: "#8193B2",
              fontSize: "14",
              padding: [0, 10, 0, 0],
            },
            nameGap: 30,
            type: "value",
            axisTick: {
              show: false,
            },
            minInterval: 1,
            axisLabel: {
              textStyle: {
                color: "#8193B2", // x轴颜色
                fontWeight: "400",
                fontSize: "12",
                fontFamily: "PingFangSC",
              },
              axisLabel: {
                formatter: "{value} 元",
              },
            },
          },
          series: [
            {
              data: this.yData,
              type: "bar",
              barWidth: 30,
              maxBarWidth: 30,
              itemStyle: {
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#91E2B6",
                    },
                    {
                      offset: 1,
                      color: "#A3DBFF",
                    },
                  ]),
                },
                emphasis: {
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#1BD46E",
                    },
                    {
                      offset: 1,
                      color: "#398AFF",
                    },
                  ]),
                },
              },
              // zlevel: 100, // 设置圆圈的优先级高于虚线
              areaStyle: {
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(108,80,243,0.3)",
                    },
                    {
                      offset: 1,
                      color: "rgba(108,80,243,0)",
                    },
                  ],
                  false
                ),
              },
            },
          ],
        };
        if (this.dimension === "1") {
          option.xAxis.name = "系统评分";
          this.crossName = "顾问系统评分";
        } else if (this.dimension === "2") {
          option.xAxis.name = "及时率";
          this.crossName = "顾问及时率";
        }
        this.init(option);
      },
      deep: true,
    },
  },
  data() {
    return {
      flag: true,
      chart: null,
      maxNum: 0,
      gridLeft: 36,
      crossName: "访问人数",
      randomNumber: new Date().getTime() + Math.random(0, 1) * 1000,
    };
  },
  mounted() {},
  methods: {
    init(option) {
      this.chart = this.$echarts.init(
        document.getElementById(`main-${this.randomNumber}`)
      );
      this.chart.setOption(option);

      this.$nextTick(() => {
        this.chart.resize();
      });

      window.addEventListener("resize", () => {
        this.resize();
      });
      this.chart.dispatchAction({
        type: "showTip",
        seriesIndex: 0,
        dataIndex: 54, // 第几个数据
      });
    },
    resize() {
      this.chart.resize();
    },
  },
  beforeDestory() {
    window.removeEventListener("resize", () => {
      this.resize();
    });
  },
  beforeRouteLeave(to, from, next) {
    window.removeEventListener("resize", () => {
      this.resize();
    });
    next();
  },
};
</script>

<style lang="less" scoped>
.main {
  width: 100%;
  // height: 400px;
}
</style>
